<template>
	<movable-area class="movableArea" :style="{'--top': menuTop + 'px','--menu-button-height':menuButtonHeight + 'px'}"
		:class="{'can-swip-submit-l': iseEnsconce && x < 10,'can-swip-submit-r': iseEnsconce && x > 10}">
		<movable-view class="movableView" :x="x" :y="y" :direction="direction" :damping="damping" @change="onChange"
			@touchend="onTouchend" inertia :friction="9">
			<image class="substitution" @tap.stop.prevent="substitution"
				src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/substitution.png"
				mode=""></image>
		</movable-view>
	</movable-area>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				x: app.globalData.widthPx,
				y: 520,
				x1: 0,
				x2: parseInt(app.globalData.widthPx) - 50,
				y1: 0,
				y2: parseInt(app.globalData.widthPx) - 20,
				move: {
					x: app.globalData.widthPx,
					y: 520,
				},
				menuTop: app.globalData.menuButtonRect.top,
				menuButtonHeight: app.globalData.menuButtonRect.height
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			iseEnsconce: {
				type: Boolean,
				default: false
			},
			canSwip: {
				type: Boolean,
				default: false
			},
			userId: {
				type: [Number, String],
				default: 0
			},
			from: {
				type: [Number, String],
				default: 0
			},
			categoryId: {
				type: [Number, String],
				default: 0
			},
			countyName: {
				type: [Number, String],
				default: 0
			},
		},
		mounted() {},
		methods: {
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
				}, 100)
			},
			substitution() {
				uni.redirectTo({
					url: '/page_sharing/accompany/details?id=' + this.userId + '&from=0&categoryId=' + this.categoryId + '&countyName=' + this.countyName,
					success: function (res) {
						console.log(res);
					},
					fail: function (res) {
						console.log(res);
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movableArea {
		position: fixed;
		top: calc(var(--top) + var(--menu-button-height));
		left: 0;
		width: 100%;
		height: calc(100vh - var(--menu-button-height) - var(--top) - 116rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - var(--menu-button-height) - var(--top) - 116rpx - env(safe-area-inset-bottom));
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
		transition: all .5s;

		&.can-swip-submit-l {
			opacity: .4;
			left: -100rpx;
		}

		&.can-swip-submit-r {
			opacity: .4;
			left: 10vw;
		}

		.movableView {
			width: 90rpx;
			height: 130rpx;
			pointer-events: auto; //恢复鼠标事件

			.substitution {
				width: 100%;
				height: 100%;
			}

			.image-box {
				position: relative;
				width: 136rpx;
				height: 140rpx;

				.free-index-ani {
					position: absolute;
					z-index: 3;
					width: 134rpx;
					height: 132rpx;

					// transform: translate(0px, 0px);
					.jump1 {
						width: 32rpx;
						height: 31rpx;
						position: absolute;
						left: 21rpx;
						top: 2rpx;
						// animation: jump infinite 2s ease;
						animation: jump 4s ease 0s infinite;
					}

					.jump2 {
						width: 15rpx;
						height: 15rpx;
						position: absolute;
						left: 88rpx;
						top: 0;
						// animation: jump2 2s ease 2s infinite;
					}

					.jump3 {
						width: 36rpx;
						height: 25rpx;
						position: absolute;
						left: 98rpx;
						top: 95rpx;
					}

					.jump4 {
						width: 15rpx;
						height: 15rpx;
						position: absolute;
						left: 0;
						top: 72rpx;
						animation: jump 3s ease 3s infinite;
					}
				}

				.free-index-btn {
					position: absolute;
					z-index: 2;
					width: 100rpx;
					height: 37rpx;
					bottom: 0;
					left: 50%;
					margin-left: calc(-100rpx / 2);
				}

				.free-index {
					position: absolute;
					z-index: 1;
					width: 136rpx;
					height: 118rpx;
				}
			}

			@keyframes jump {
				0% {
					// transform: translateY(0px) scale(1);
					transform: translate(0, 0);
				}

				50% {
					// transform: translateY(-10px) scale(1.1);
					transform: translate(-3px, -3px);
				}

				100% {
					// transform: translateY(0px) scale(1);
					transform: translate(0, 0);
				}
			}

			@keyframes jump2 {
				0% {
					transform: translate(0, 0);
				}

				50% {
					transform: translate(3px, -3px);
				}

				100% {
					transform: translate(0, 0);
				}
			}

		}
	}
</style>